import React, { useState, useEffect } from 'react'
import axios from 'axios'
import style from './index.module.scss'

export default function demo1() {
    const [title, setTitle] = useState('')
    const [skill, setSkill] = useState('')
    useEffect(() => {

    }, [])

    const data = {
        title,
        skill
    }

    /**  增 */
    const create_json = () => {
        let url = `http://localhost:2002/message`

        axios.post(url, data).then(res => {
            console.log(res.data);
        })

    }
    /** 改 */
    const update_json = () => {
        let url = `http://localhost:2002/message/1`
        const data = {
            title: 'king',
            skill: 'jiji'
        }
        axios.put(url, data).then(res => {
            console.log(res.data);
        })
    }
    /**删 */
    const del_json = () => {
        let url = `http://localhost:2002/message/3`
        axios.delete(url).then(res => {
            console.log(res.data);
        })
    }
    /**查 */
    const examine_json = () => {
        let url = `http://localhost:2002/message`
        axios.get(url).then(res => {
            console.log(res.data);
        })
    }
    return (
        <div className={style.home}>
            <div className={style.input_Content}>
                <span>
                    <label>title</label>
                    <input type="text" onChange={(e) => setTitle(e.target.value)} />
                </span>
                <span>
                    <label>skill</label>
                    <input type="text" onChange={(e) => setSkill(e.target.value)} />
                </span>
            </div>
            <div className={style.CRUD}>
                <button onClick={create_json}>添加</button>
                <button onClick={update_json}>修改</button>
                <button onClick={del_json}>删除</button>
                <button onClick={examine_json}>查看</button>
            </div>
        </div>
    )
}
